<template>
  <div class="areaDetail">
    <div class="wbg brr">
      <el-form ref="form" :model="form" :rules="rules">
        <div class="pdd" v-loading="loading">
          <div class="flex flexAuto">
            <el-form-item label="库区编号" class="flex1">
              <el-input v-model="form.code" disabled></el-input>
            </el-form-item>
            <el-form-item label="所属仓库" class="flex1" prop="warehouseId">
              <el-select
                v-model="form.warehouseId"
                placeholder="请选择"
                class="el-input"
                clearable
              >
                <el-option v-for="item in wearhouseList" :key="item.code" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="库区名称" class="flex1" prop="name">
              <el-input v-model="form.name" placeholder="请输入库区名称"></el-input>
            </el-form-item>
            <el-form-item label="温度类型" class="flex1" prop="temperatureType">
              <el-select
                v-model="form.temperatureType"
                placeholder="请选择"
                class="el-input"
                clearable
              >
                <el-option v-for="(item, index) in temperatureType" :key="index" :label="item.value" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex flexAuto">
            <el-form-item label="承重类型" class="flex1" prop="bearingType">
              <el-select
                v-model="form.bearingType"
                placeholder="请选择"
                class="el-input"
                clearable
              >
                <el-option v-for="(item, index) in bearingType" :key="index" :label="item.value" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用途类型" class="flex1" prop="useType">
              <el-select
                v-model="form.useType"
                placeholder="请选择"
                class="el-input"
                clearable
              >
                <el-option v-for="(item, index) in wearhouseUseType" :key="index" :label="item.region" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人" class="flex1" prop="personName">
              <el-input v-model="form.personName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" class="flex1">
              <el-input v-model="form.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="flex flexAuto">
            <el-form-item label="库区状态" class="flex1" prop="status">
              <div class="el-input">
                <el-radio v-for="(item, index) in warehouseStatus" :key="index" v-model="form.status" :label="item.type.toString()">{{ item.status }}</el-radio>
              </div>
            </el-form-item>
          </div>
        </div>
        <el-form-item>
          <div class="upup">
            <el-button round @click="backRouter">返回</el-button>
            <el-button round type="primary" @click="newArea">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { codeNext, getWearhouseList } from '@/api/warehouse'
import { newArea, getAreaDetail, modifyArea } from '@/api/area'
import { temperatureType, bearingType, warehouseStatus, wearhouseUseType } from '@/constant/warehouse'
export default {
  name: 'AreaDetail',
  data () {
    return {
      tabTitle: '新增库位',
      temperatureType,
      warehouseStatus,
      wearhouseUseType,
      bearingType,
      loading: false,
      cascaderValue: [],
      form: {
        code: '',
        name: '',
        warehouseId: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        status: '0'
      },
      rules: {
        warehouseId: [{ required: true, message: '请输选择所属仓库' }],
        name: [{ required: true, message: '请输入库区名' }],
        temperatureType: [{ required: true, message: '请选择温度类型' }],
        bearingType: [{ required: true, message: '请选择承重类型' }],
        useType: [{ required: true, message: '请选择用途类型' }],
        personName: [{ required: true, message: '请输入负责人' }],
        status: [{ required: true, message: '请选择库区状态' }]
      },
      uploadflag: false,
      wearhouseList: []
    }
  },
  created () {
    this.setPage()
    this.setForm()
  },
  methods: {
    // 初始化表单
    async setForm () {
      this.loading = true
      const { data: { data: wearhouseList } } = await getWearhouseList({ status: 1 })
      this.wearhouseList = wearhouseList
      if (!this.$route.params?.id) {
        const res = await codeNext('KQ')
        this.form.code = res.data.data
        this.uploadflag = false
      } else {
        const res = await getAreaDetail(this.$route.params.id)
        if (res.data.data !== null) {
          console.log(res)
          this.form = res.data.data
          this.form.status = res.data.data.status.toString()
          this.uploadflag = true
        } else {
          this.backRouter()
          this.$store.dispatch('removeTab', { thisPath: this.$route.path, path: this.$route.path })
          this.$message.warning('获取数据失败')
        }
      }
      this.loading = false
    },
    backRouter () {
      this.$router.push('/manage-base-info/area')
    },
    async newArea () {
      await this.$refs.form.validate()
      if (!this.$route.params?.id) {
        await newArea(this.form)
      } else {
        await modifyArea(this.form)
        this.$store.dispatch('removeTab', { thisPath: this.$route.path, path: this.$route.path })
      }
      this.$message.success('提交成功')
      this.$refs.form.resetFields()
      this.setForm()
      this.backRouter()
    },
    // 用于给面包屑添加屑
    setPage () {
      console.log(this.$route.params)
      this.tabTitle = this.$route.params?.id ? '编辑库区' : '新增库区'
      this.$store.dispatch('keepAliveListFn', this.$options.name)
      const switchTab = {
        modelName: this.$options.name,
        path: this.$route.path,
        name: this.tabTitle,
        show: true
      }
      if (
        !this.$store.state.switchTab.find(
          (item) => item.path === this.$route.path
        )
      ) {
        if (this.$route.params?.id) {
          switchTab.root = false
        } else {
          switchTab.root = true
        }
        this.$store.commit('pushSwitchTab', switchTab)
      }
    }
  },
  activated () {
    this.setPage()
    console.log(this.uploadflag)
    if (this.$route.params?.id && this.uploadflag) {
      this.setForm()
    }
  }
}
</script>

<style lang="scss" scoped>
.pdd {
  padding: 30px 20px 10px 20px;
  .el-form-item {
    padding: 0 10px;
  }
}
.upup {
  padding: 30px;
  border-top: 1px solid #f1f1f1;
  text-align: center;
  .el-button {
    margin: 0 15px;
    width: 170px;
  }
}
</style>
